<template>
    <div class="ratio-bar clearfix">
        <div class="bar-bg" :style="{width: barWidth}"></div>
    </div>
</template>
<script>
    export default {
        name: 'RatioBar',
        props: {
            total: Number,
            cur: Number
        },
        data() {
            return {}
        },
        computed: {
            barWidth() {
                return this.cur / this.total * 100 + '%'
            }
        }
    }
</script>
<style lang="less">
    .ratio-bar {
        background: #1D14A6;
        border-radius: 3px;

        .bar-bg {
            height: 18px;
            background: #40E2FE;
            border-radius: 3px;
        }
    }
</style>
